<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="/css/overview2.css">
	<link rel="stylesheet" href="/scriptZIP/flatpickr.min.css">
	<!--签到的样式 -->

	<title>首页</title>
	<style>
		.echarts {
			width: 100% !important;
			height: 100% !important;
		}

		input[readonly] {
			display: none;
		}

		.flatpickr-calendar.inline,
		.flatpickr-rContainer,
		.flatpickr-days,
		.dayContainer {
			width: 100%;
		}

		.dayContainer,
		.flatpickr-day {
			max-width: none;
		}
	</style>
</head>

<body style="margin: 0 0 0 2%">
	<div id="app">

		<div style="margin-top: 30px">

			<div class="main">
				<div><img src="image/a1.png" class="img_m1"></div>
				<div class="main_1" v-text="agentId?count.device:count.agent"></div>
				<hr />
				<div class="main_2">
					<span>{{agentId?'设备':'代理商'}}总数量</span>
					<img src="image/a2.png" class="ima_m2">
				</div>
			</div>

			<div class="main">
				<div><img src="image/a3.png" class="img_m1"></div>
				<div class="main_1" v-text="count.school"></div>
				<hr />
				<div class="main_2">学校总数量<img src="image/a4.png" class="ima_m2"></div>
			</div>

			<div class="main">
				<div><img src="image/a5.png" class="img_m1"></div>
				<div class="main_1" v-text="count.teacher"></div>
				<hr />
				<div class="main_2">教师总数量<img src="image/a6.png" class="ima_m2"></div>
			</div>

			<div class="main">
				<div><img src="image/a7.png" class="img_m1"></div>
				<div class="main_1" v-text="count.student"></div>
				<hr />
				<div class="main_2">学生总数量<img src="image/a8.png" class="ima_m2"></div>
			</div>

			<div class="main">
				<div><img src="image/a9.png" class="img_m1"></div>
				<div class="main_1" v-text="count.attendance"></div>
				<hr />
				<div class="main_2">考勤总数量<img src="image/a10.png" class="ima_m2"></div>
			</div>

			<div class="main">
				<div><img src="image/a11.png" class="img_m1"></div>
				<div class="main_1" v-text="count.card"></div>
				<hr />
				<div class="main_2">总绑卡数<img src="image/a12.png" class="ima_m2"></div>
			</div>
		</div>

		<div style="margin-top: 30px">
			<!--线形图-->
			<div class="echart_d1">
				<div class="echart_div" style="text-align: right;margin-right:20px ">
					<!-- <button class="tub_1"
						:style="{background: 'url(image/a1'+(sum1==0?3:4)+'.png) no-repeat center center'}"
						@click="mychange1(sum1)">
						<span style="position: relative;left: -4px;font-size: 12px">考勤数</span>
						<span style="position: relative;left: 4px;font-size: 12px">绑定数</span>
					</button>
					&nbsp; -->
					<!-- <button class="tub_1"
						:style="{background: 'url(image/a1'+(sum2==0?3:4)+'.png) no-repeat center center'}"
						@click="mychange2(sum2)">
						<span style="position: relative;left: -4px;font-size: 12px">一周内</span>
						<span style="position: relative;left: 4px;font-size: 12px;font-size: 12px">一月内</span>
					</button> -->
				</div>
				<div id="main1" style="width: 100%;height: 400px;padding:0 20px">
					<v-chart :option="option1" />
				</div>
				<br />
			</div>
			<!--日历-->
			<div class="echart_d2">
				<div class="riqi">
					<flat-pickr name="date" v-model="date" :config="{inline:true,locale:'zh'}"></flat-pickr>

					<div style="background: #2196f3;height: 3.5rem;text-align: center;">
						<label style="font-size: 22px;vertical-align:middle;line-height: 3.5rem;color: #ffffff;">
							当日考勤次数 {{attendanceCount}}人
						</label>
					</div>
					<div style="background: #2196f3;height: 3.55rem;text-align: center;">
						<label style="font-size: 22px;vertical-align:middle;line-height: 3.5rem;color: #ffffff;">
							{{''}}
						</label>
					</div>
				</div>
			</div>
		</div>

		<!-- 扇形图 饼状图-->
		<div class="header">
			<div class="echarts1">
				<div class="echart_div">
					学校数量信息展示
					<button class="tub_2" :style="{background: 'url(image/a1'+(sxt3_show?5:6)+'.png)'}"
						@click="sxt3_show=!sxt3_show"></button>
				</div>
				<div id="main3" style="width: 100%;height: 400px;padding-left: 10px">
					<v-chart :option="option3" />
				</div>
			</div>
			<div class="echarts1">
				<div class="echart_div">
					设备数量信息展示
					<button class="tub_2" :style="{background: 'url(image/a1'+(sxt4_show?5:6)+'.png)'}"
						@click="sxt4_show=!sxt4_show"></button>
				</div>
				<div style="width: 100%;height: 400px;padding-left: 10px">
					<v-chart :option="option4" />
				</div>
			</div>

		</div>


	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/echarts.simple.min.js"></script>
	<!--图表的 -->
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/index.umd.min.js"></script>
	<script src="/scriptZIP/flatpickr.min.js"></script>
	<script src="/scriptZIP/zh.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/vue-flatpickr.min.js"></script>
	<script src="/js/common.js"></script>

	<script>

		Vue.component('v-chart', VueECharts);
		Vue.component('flat-pickr', VueFlatpickr);


		var xs = [];
		for (var i = 27; i >= 0; i--)
			xs.push(dayjs().subtract(i, 'day').date());

		new Vue({
			el: '#app',
			data: {

				count: {},
				devices: [0, 0, 0, 0, 0, 0, 0, 0],
				schools: [0, 0, 0, 0, 0],
				date: dayjs().format('YYYY-MM-DD'),

				data1: xs,
				data2: xs,

				attendanceCount: 0,

				sxt3_show: true,
				sxt4_show: true,
				sxt5_show: true,
				agentId: null,

			},
			created: function () {
				var param = {};

				if (/agent/.test(top.location.href)) {
					this.agentId = top_params().id;
					param = { params: { agentId: this.agentId } };
				}

				axios.get('/pc/home', param).then(function (res) {
					this.count = res.data;
				}.bind(this));

				axios.get('/pc/home/device', param).then(function (res) {
					this.devices = res.data;
				}.bind(this));

				axios.get('/pc/home/school', param).then(function (res) {
					this.schools = res.data;
				}.bind(this));

				axios.get('/pc/home/attendance', param).then(function (res) {
					this.attendanceCount = res.data;
				}.bind(this));

				axios.get('/pc/home/attendance/recent', param).then(function (res) {
					var data = res.data;
					this.data2 = this.data1.map(function (it) {
						return data[it] || 0;
					});
				}.bind(this));

			},
			methods: {

			},
			watch: {
				date: function (nv, ov) {
					axios.get('/pc/home/attendance', {
						params: { date: nv, agentId: this.agentId }
					}).then(function (res) {
						this.attendanceCount = res.data;
					}.bind(this));
				}
			},
			computed: {
				option1: function () {
					var colors = ['#5793f3', '#d14a61', '#675bba'];
					return {
						color: colors,

						tooltip: {
							trigger: 'none',
							axisPointer: {
								type: 'cross'
							}
						},
						title: {
							show: true,
							text: '最近每天考勤数量统计曲线图',
							x: 'center',
						},
						grid: {
							top: 70,
							bottom: 50
						},
						xAxis: [
							{
								type: 'category',
								axisTick: {
									alignWithLabel: true
								},
								axisLine: {
									onZero: false,
									lineStyle: {
										color: colors[1]
									}
								},
								axisPointer: {
									label: {
										formatter: function (params) {
											return params.value + '号考勤次数：' + params.seriesData[0].data;
										}
									}
								},
								data: this.data1,
							}, {
								type: 'category',
								axisTick: {
									alignWithLabel: true
								},
								axisLine: {
									onZero: false,
									lineStyle: {
										color: colors[0]
									}
								},
							}
						],
						yAxis: [
							{
								type: 'value'
							}
						],
						series: [
							{
								name: '数据统计曲线图',
								type: 'line',
								smooth: true,
								data: this.data2,
							}
						]
					};
				},
				option3: function () {
					var list = '幼儿园,小学,中学,培训机构,其他'.split(',');

					return {
						xAxis: {
							show: this.sxt3_show,/*x轴*/
							type: 'category',
							data: list
						},
						yAxis: {
							show: false,/*关闭y轴*/
							type: "value",
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							show: true,
							left: 'center',
							bottom: 50,
							data: list
						},
						series: [
							{
								name: '学校数量',
								type: this.sxt3_show ? 'bar' : 'pie',
								radius: '55%',/*图谱大小*/
								center: ['50%', '45%'],/*xy水平方位*/
								label: {
									show: true,
									position: 'top'
								},
								itemStyle: {
									normal: {
										color: function (params) {
											var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3', '#f47e39'];/*设置颜色*/
											return colorList[params.dataIndex];
										}
									},
								},
								data: list.map(function (it, i) {
									return { name: it, value: this.schools[i] };
								}.bind(this)),
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

				},
				option4: function () {

					var list = '打卡,人脸识别,人脸识别测温,闸机,校车,分班播报机,访客机,放学播报机'.split(',');

					return {
						xAxis: {
							show: this.sxt4_show,/*x轴*/
							type: 'category',
							data: list
						},
						yAxis: {
							show: false,
							type: "value",
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							/*是否显示 图谱位置 显示内容对应*/
							show: true,
							left: 'center',
							bottom: 50,
							data: list
						},
						series: [
							{
								name: '设备数量',
								type: this.sxt4_show ? 'bar' : 'pie',
								radius: '55%',/*图谱大小*/
								center: ['50%', '45%'],/*xy水平方位*/
								label: {
									show: true,
									position: 'top'
								},
								data: list.map(function (it, i) {
									return { name: it, value: this.devices[i] };
								}.bind(this)),
								itemStyle: {
									normal: {
										color: function (params) {
											var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3', '#f47e39', '#934855', '#158968'];
											return colorList[params.dataIndex];
										}
									},
								},
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

				},
				option5: function () {
					return {
						xAxis: {
							show: this.sxt5_show,/*x轴*/
							type: 'category',
							data: ['接送卡', '校车卡', '人脸虚拟卡', '其他']
						},
						yAxis: {
							show: false,/*关闭y轴*/
							type: "value",
						},
						/*悬浮状态*/
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							/*是否显示 图谱位置 显示内容对应*/
							show: true,
							left: 'center',
							bottom: 50,
							data: ['接送卡', '校车卡', '人脸虚拟卡', '其他']
						},
						/*数据*/
						series: [{
							data: [
								{ value: 3000, name: '接送卡' },
								{ value: 5000, name: '校车卡' },
								{ value: 10000, name: '人脸虚拟卡' },
								{ value: 1000, name: '其他' }
							],
							name: '设备卡数',/**/
							radius: '55%',/*图谱大小*/
							center: ['50%', '45%'],/*xy水平方位*/
							label: {
								show: true,/*在上方显示数据*/
								position: 'top'
							},
							itemStyle: {
								normal: {
									color: function (params) {
										var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3', '#f47e39'];/*设置颜色*/
										return colorList[params.dataIndex];
									}
								},
							},
							type: this.sxt5_show ? 'bar' : 'pie',
						}]
					};
				}
			}
		})

	</script>
</body>

</html>